<template>
    <div class="footer">
        <div class="firstInfo">
            <div class="login">
                登录
            </div>
            <div class="city_">
                <span>城市:</span>
                <img src="../../img/zuobiao.png" alt="">
                <span id="black">廊坊</span>
            </div>
        </div>
        <ul class="linkList">
            <li style="padding-left:0">首页</li>
            <li>我的</li>
            <li>美团下载</li>
            <li>电脑版</li>
            <li style="padding-right:0;border-right:none;">帮助</li>
        </ul>
        <p>
            <span>友情链接：猫眼电影</span><span>大众点评</span><span>美团旅行</span><span style="padding-right:0">榛果民宿</span>
        </p>
        <p>
            <span>大众点评下载</span><span>美团餐饮系统</span><span style="padding-right:0">美团餐饮培训</span>
        </p>
        <p>
            <span>快驴进货商家合作</span><span>商机/招聘</span>
        </p>
        <div class="lastInfo">
            <div>——</div>
            <span>©2022 美团网 京ICP证070791号</span>
            <div>——</div>
        </div>
    </div>
</template>

<script>
export default{
    name:'Footer',
    data(){}
}
</script>

<style lang="scss" scoped>
.footer{
    width: 650px;
    height: 376px;
    padding: 30px 50px;
    margin-top: 1250px;
    .firstInfo{
        display:flex;
        align-items: center;
        justify-content: space-between;
        .login{
            color: #333;
            width: 86px;
            line-height: 50px;
            padding: 2px 12px;
            background-color: #FFC100;
            border-radius: 10px;
            text-align: center;
            font-size: 26px;
        }
        .city_{
            display:flex;
            align-items: center;
            justify-content: space-between;
            font-size: 26px;
            span{
                color: #999;
            }
            img{
                width: 24px;
                height: 28px;
            }
            #black{
                color: #222;
            }
        }
    }
    .linkList{
        display:flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 50px;
        li{
            padding: 0 40px;
            border-right: 2px solid #666;
            font-size: 24px;
            color: #FE8C00;
            cursor: pointer;
        }
    }
    P{
        text-align: center;
        span{
            font-size: 24px;
            color: black;
            display: inline-block;
            padding-right: 40px;
        }
    }
    .lastInfo{
        div{
            color: #999;
            display: inline-block;
        }
        span{
            color: #999;
            font-size: 24px;
            display: inline-block;
            margin: 0 20px;
        }
    }
}
</style>